<template>
  <div>
    <div class="home_right" v-for="item in collectcount" :key="item.uid">
      <img class="shoucang_img" :src="item.fileUid" @click="findBlogByUid(item.uid)">
      <div class="shoucang_tit">
        <font class="shoucang_cont" @click="findBlogByUid(item.uid)">{{item.title}}</font>
      </div>
      <div class="shoucang_auth">
        <font class="auth">{{item.author}}</font>
      </div>
<!--      <p><a >{{item.title}}</a></p>-->
<!--      <p>{{item.author}}</p>-->
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "collect",
    data() {
      return {
        collectcount : [], //标签列表

      };
    },

    methods: {

      findBycollect:function () {
        var _this=this;
        axios.get("/api/blogs/findBycollect").then(function (res) {
          console.log(res.data)
          _this. collectcount=res.data
        })
      },
      findBlogByUid:function (uid) {
        this.$router.push('/bloginfo/'+uid);
      }
    },
    mounted() {
      this.findBycollect();
    }
  };
</script>

<style>
  .shoucang_img{
    width: 390px;
    height: 216px;
  }
  .shoucang_tit{
    width: 390px;
    height: 50px;
    position: relative;
    z-index: 3;
    top: -53px;
    background:rgba(1,0,0,0.5);
  }
.shoucang_cont{
  font-size: 20px;
  line-height: 50px;
  color: #FFF;
}
  .shoucang_auth{
    width: 80px;
    height: 40px;
    position: relative;
    z-index: 3;
    top: -255px;
    left: 20px;
    border-radius: 5px;
    background:rgba(1,0,0,0.5);
  }
  .auth{
    color: #FFF;
    line-height: 40px;
  }
</style>
